<template>
	<view class="content">
		<view class="container">
			<uni-search-bar @confirm="skip" :focus="true" v-model="search.searchBox" @input="inputChange" cancelButton="always" @cancel="cancel" @clear="clear" placeholder="输入小区名">
			</uni-search-bar>
			<view class="container_flex">
				<view class="btn" @click="btnChange(item)" v-for="(item,index) in  btnList" :key="index"
					:class="search.isConcentrated == item.value?'activate':'unactivate'">
					{{item.label}}
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="conL" @scrolltolower="loadMore">
			<view v-if="dataList.length">
				<view class="box_content" v-for="(item,index) in dataList" :key="index" @click="skipNext(item)">
					<view class="box_flex">
						<!-- 左 -->
						<view class="box_left">
							<view class="img-icon">
								<image class="img" :src="$imgUrl + '/icon/houseIcon.png'" mode=""></image>
							</view>
							<view class="house">{{item.name}}</view>
							<view class="flat">{{item.isConcentrated == true?'公寓':'小区'}}</view>
						</view>
						<!-- 右 -->
						<view class="box_right" v-if="item.availableForRentNum > 0">
							<!-- <text class="kezu">可租套数:</text>
							<text class="num">{{item.availableForRentNum}}</text>
							<text class="tao">套</text> -->
							<text class="green" v-if="item.availableForRentNum>5">房源充足</text>
							<text class="gray" v-else-if="item.availableForRentNum<=0">房源满租</text>
							<text class="red" v-else>房源紧张</text>
						</view>
					</view>
				</view>
			</view>
			<empty v-else></empty>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		getroomsList
	} from '@/common/API/room'
	const search = reactive({
		searchBox: '',
		isConcentrated: true,
		pageNo: 1,
		pageSize: 20,
		page: 0
	})
	const btnList = ref([
		// {
		// 	label: '全部',
		// 	value: null
		// },
		// {
		// 	label: '公寓',
		// 	value: true
		// },
		// {
		// 	label: '散房',
		// 	value: false
		// },
	])

	// 清空按钮
	const clear = () => {
		search.searchBox = ''
		reset()
		getData()
	}
	// 重置数据
	const reset = () => {
		dataList.value = []
		search.pageNo = 1
		search.pageSize = 20
		search.page = 0
	}
	// 按钮切换
	const btnChange = (item) => {
		reset()
		search.isConcentrated = item.value
		getData()
	}

	// 输入框输入
	const inputChange = (val) => {
		reset()
		let time = null; //time用来控制事件的触发
		if (time !== null) {
			clearTimeout(time);
		}
		time = setTimeout(() => {
			getData()
		}, 500)
	}

	// 加载更多
	const isLoadMore = ref(false)
	const loadMore = () => {
		if (search.pageNo >= search.page) {
			return
		}
		search.pageNo++
		isLoadMore.value = true;
		getData()
		setTimeout(() => {
			isLoadMore.value = false;
		}, 2000)
	}

	// 获取数据
	const dataList = ref([])
	const getData = async () => {
		uni.showLoading({
			title: '加载中...'
		});
		try {
			const data = await getroomsList(search)
			search.page = data.total ? Math.ceil(data.total / search.pageSize) : 1
			data.list.forEach(item => {
				dataList.value.push(item)
			})
		} catch (e) {
			console.log(e);
		} finally {
			uni.hideLoading()
		}
	}


	// 键盘确认跳转
	const skip = () => {
		uni.navigateTo({
			url: `/pages/searchRoom/index?search=${search.searchBox}`
		})
	}

	// 跳转门店
	const skipNext = (item) => {
		//公寓
		if(item.isConcentrated){
			uni.navigateTo({
				url: `/pages/searchRoom/roomDetail?roomId=${item.apartmentId}`
			})
		}else{
			uni.navigateTo({
				url: `/pages/searchRoom/index?roomAreaId=${item.id}&search=${item.name}&curTab=2`
			})
		}
	}

	// 取消按钮
	const cancel = () => {
		uni.switchTab({
			url: '/pages/index/index',
		})
	}

	onShow(() => {
		reset()
		getData()
	})
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.conL {
		flex: 1;
		overflow-y: auto;
		margin-top: 16rpx;
		background-color: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
		.box_content {
			width: 100%;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E5E5E5;
			&:last-child{
				border: none;
			}
			.box_flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.box_left {
					display: flex;
					align-items: center;
					.img-icon {
						width: 32rpx;
						height: 32rpx;
					}
					.house {
						font-weight: 700;
						font-size: 30rpx;
						margin: 0 10rpx 0 12rpx;
						max-width: 320rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.flat {
						display: flex;
						align-items: center;
						padding: 0 8rpx;
						text-align: center;
						border-radius: 8rpx;
						font-size: 20rpx;
						height: 32rpx;
						line-height: 32rpx;
						background-color: #F5F2F0;
						color: #A68868;
					}
				}
				.box_right {
					font-size: 24rpx;
					color: #999;
					.num {
						margin: 0 5rpx;
						color: $uni-color-primary;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.container {
		background-color: #fff;
		padding: calc(20rpx + var(--status-bar-height)) 32rpx 24rpx;
		.uni-searchbar{
			padding: 20rpx 0;
			margin: 0 0 8rpx;
		}
		.container_flex {
			width: 100%;
			display: flex;
			.btn {
				padding: 0 14rpx;
				font-size: 24rpx;
				height: 38rpx;
				line-height: 38rpx;
				margin-right: 8rpx;
				border-radius: 4rpx;
			}
			.activate {
				background-color: #FD9618;
				color: #fff;
			}

			.unactivate {
				background-color: #ededed;
				color: #b0b0b0;
			}

		}
	}
</style>
